import "./tabs.scss";
import { useEffect, useState } from "react";

const Tabs = ({ data }) => {
  // effect
  useEffect(() => {
    console.log("tabsData", data);
  }, []);

  // 当前选中的 tab ，默认下标为 0
  const [currentActiveTabIndex, setCurrentActiveTabIndex] = useState(0);

  return (
    <>
      <div className="tabs_box">
        <div className="tabs_header">
          {data?.map((tab, indexT) => (
            <span
              className="tabs_head_item_title"
              onClick={() => {
                setCurrentActiveTabIndex(indexT);
                tab.click();
              }}
              key={indexT}
            >
              {tab.title}
            </span>
          ))}
        </div>
        <div className="tabs_body">
          {
            data?.filter((tab, indexT) => {
              return indexT == currentActiveTabIndex;
            })[0].component
          }
        </div>
      </div>
    </>
  );
};

export default Tabs;
